/**
 * @Description:
 * @author 紫霞
 * @since 2019/1/17
 */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Row, Col, Card, Button, Tabs, Form, Popconfirm, Modal, message, } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import Keypress from 'widget/Keypress'

// 当前组件样式
import styles from './intermediaryListStyle.less'
import { Grid, QueryCondition } from 'widget/Grid/index'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'
import { chunk } from 'lodash'

import classnames from 'classnames/bind'

//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'
import {CopyToClipboard} from 'react-copy-to-clipboard';

let cx = classnames.bind(styles)

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const TabPane = Tabs.TabPane
//  信用代码 orgCode  中介公司名称 orgName  合作状态 state 法人 legalMan  合作有效时间  门店合作码 cooperationCode  报备人数 recommendNum  成交数  dealNum
const routeView = function ({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const {modelObj, namespace} = model
  let {visible,  statisticsInfo,tableData,loading} = modelObj
  // modelObj.xxx获取model中状态机的值
  //console.log('modelObj', modelObj)
  
  
  let statusMap = {
    1: {
      value: '1',
      label: '启用'
    },
    2: {
      value: '2',
      label: '禁用'
    },
  }
  const columns = [
    {
      title: '团队名称', dataIndex: 'teamName', key: 'teamName', 
    },
    {
      title: '用户名称', dataIndex: 'accountName', key: 'accountName',
    },
    {
      title: '预留手机号', dataIndex: 'mobile', key: 'mobile',
    },
    {
      title: '合作码', dataIndex: 'cooperationCode', key: 'cooperationCode',
      render:function(text){
        if(text){
          return (
            <CopyToClipboard text={text}
              onCopy={() => {
                message.success('复制成功')
              }}>
              <a style={{color:"#0877FD"}}>点击复制:{text}</a>
            </CopyToClipboard>
          )
        }
      }
    },
  ]
  // 表格模板配置
  const gridProps = {
    nameSpace: namespace,
    data: {
      columns,
      tableData,
      pageConfig:{}
    },
    scroll: {x: 600},
    loading,
    paginationFlag:false
  }
  
  //修改状态
  const changeState = (payload) => {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {...payload}
    })

  }
  
  // 详情页跳转
  function routerGo ({url = '', query = {}}) {
    hashHistory.push({
      pathname: url,
      query: query
    })
  }
  function updateModal(visible,orgId){
    
      changeState({
        visible
      })
      if(visible){
        dispatch({
          type:`${namespace}/getListBy`,
          payload:{
            orgId
          }
        })
      }
    }
  
  
  let pageProps = {
    ui: {
      'api_url': 'admin/org/queryOrgByName',
      'method': 'POST',
      'app': '',
      'params': '',
      // "mockData": mockData,
      'mockData': null,
      
      //refreshByEnter: true,  //监控键盘事件，自动刷新数据
      'search_bar': {
        'fields': [
          {
            en_name: 'orgName',
            zh_name: '中介公司名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'state',
            zh_name: '合作状态',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: [//1 启用 ，2 禁用
              {value: '', label: '全部'},
              {value: '1', label: '启用'},
              {value: '2', label: '禁用'},
            ]
          },
        ],
        searchHandler: () => {
          console.log('search click')
        },
        resetHandler: () => {
          console.log('reset click')
        },
        searchCallback: params => {
          console.log('search finish', params)
        },
        pasteTargetList: [
          'carName',
        ]
      },
      action_bar: [
        {
          label: '导出',
          type: 'primary',
          btnId: '40101',
          onClick: (e, row) => {
            dispatch({
              type: `${namespace}/exportList`,
              payload: {}
            })
          }
        },
        {
          label: '新增',
          type: 'primary',
          btnId: '40102',
          onClick: (e, row) => {
            routerGo({url: '/home/channelAdmin/intermediaryDetail', query: {pageType: 'add',}})
          }
        },
      ],
      // 数据表格:  信用代码 orgCode  中介公司名称 orgName  合作状态 state 法人 legalMan  合作有效时间  门店合作码 cooperationCode  报备人数 recommendNum  成交数  dealNum
      'table':
        {
          'status_params': 'status=0',
          'status_text': '全部',
          'scroll': {x: 1300},
          'extProps': {title: ()=>{
            return  (<Row className={'mgb1'}>
              <Col span={24}>
                <span className={'mgr2'}>报备客户：{statisticsInfo.recommendNum||0}人   成交：{statisticsInfo.dealNum||0}人</span>
              </Col>
            </Row>)
            }},
          'fields': [

            {
              'en_name': 'orgCode',
              'zh_name': '信用代码',
            },
            {
              'en_name': 'orgName',
              'zh_name': '中介公司名称',
            },
            {
              'en_name': 'state',
              'zh_name': '合作状态',
              render: (value, item, index) => {
                return statusMap[item.state] && statusMap[item.state]['label']
              },
              width:100
            },
            {
              'en_name': 'legalMan',
              'zh_name': '法人',
              width:130
            },
            // {
            //   "en_name": "",
            //   "zh_name": "合作有效时间",
            // },
            {
              'en_name': 'cooperationCode',
              'zh_name': '门店合作码',
              width:130,
              render:(text,item)=>{

                return item.cooperationCode&&item.cooperationCode.indexOf(',')>-1?<a style={{color:"#0877FD"}} onClick={()=>{updateModal(true,item.orgId)}}>多个合作码</a>:<CopyToClipboard text={text}
                onCopy={() => {
                  message.success('复制成功')
                }}><a style={{color:"#0877FD"}}>{text}</a></CopyToClipboard>
              }
            },
            {
              'en_name': 'recommendNum',
              'zh_name': '报备人数',
              width:100
            },
            {
              'en_name': 'dealNum',
              'zh_name': '成交数',
              width:130
            },
          
          ],
          action_props: {
            width: 195,
          },
          actions: [
            {
              func_name: 'onEdit',
              label: '',
              render: (item, index) => {
                return (
                  <FlagBtn node={<a onClick={() => {
                    routerGo({
                      url: '/home/channelAdmin/reportClientList',
                      query: {
                        pageType: 'edit',
                        orgId: item.orgId,
                        orgName: item.orgName,
                        agentConfigId: item.agentConfigId
                      }
                    })
                  }}>查看客户<span className="ant-divider"/></a>} btnId={'40103'}> </FlagBtn>
                
                )
              }
            },
            {
              func_name: 'onEdit',
              label: '',
              render: (item, index) => {
                return (
                  <FlagBtn node={<a onClick={() => {
                    routerGo({
                      url: '/home/channelAdmin/intermediaryDetail',
                      query: {
                        pageType: 'edit',
                        orgId: item.orgId,
                        orgName: item.orgName,
                        agentConfigId: item.agentConfigId
                      }
                    })
                  }}>维护中介合作</a>} btnId={'40104'}> </FlagBtn>
                )
              }
            },
          ],
        },
      
    },
  }
  
  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: {biz}
      })
    }
  }
  
  return (
    <div className={cx('pageLayout')}>
      <div className="public_listMain">
        <div style={{color: 'red',textAlign: 'left',fontSize: '22px',paddingRight: '18%',fontWeight: 600}}>请优先在下方列表搜索中介/渠道，如果搜索无结果才新增</div>
        <ListPage pageProps={pageProps}/>
      </div>
      <Modal
        title={''}
        visible={visible}
        okText={'确认'}
        width={800}
        cancelText={'取消'}
        onCancel={(e) => {
          updateModal(false)
        }}
        onOk={(e) => {

          updateModal(false)
        }}
        >
          <Grid {...gridProps} />
        </Modal>
    </div>
    
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))

